"use client";

//Global
import React, { FC, useEffect } from "react";
import { useRouter, redirect } from "next/navigation";

//Utils
import { MAIN_PAGE } from "@/utils/routes";

//Hooks
import { useUserActions } from "@/hooks/useUserActions";
import { useTypedSelector } from "@/hooks/useTypedSelector";

//Components
import { Spinner } from "../spinner/Spinner";
import { Button } from "@mui/material";

//Styles
import styles from "@/styles/profile.module.css";

const ProfilePage: FC = () => {
  const { push } = useRouter();
  const { logOut } = useUserActions();
  const { currentUser, status } = useTypedSelector(state => state.user);

  useEffect(() => {
    if (!currentUser.email && status === "fulfilled") {
      redirect(MAIN_PAGE);
    }
  }, [currentUser.email, push, status]);

  if (status === "pending") return <Spinner />;

  return (
    <section className={styles.profileContent}>
      <h3>This is your profile page, {currentUser.name}!</h3>

      <span>Your phone number: {currentUser.phoneNumber}</span>

      <span>Your email: {currentUser.email}</span>

      <span>Your name: {currentUser.name}</span>

      <span>Your surname: {currentUser.surname}</span>

      <Button className={styles["button-log-out"]} onClick={logOut}>
        Log Out
      </Button>
    </section>
  );
};

export { ProfilePage };
